<template>
    <div>
        <div class="Request-Service-layout">
            <div class="Request-Service-banner"></div>
            <div class=" m-tb-70">
                <div class="main-b">
                    <div class="step-one"></div>
                    <div class="step-one-view-layout">
                        <h2>为确保您账户的安全，需要先验证您的手机</h2>
                        <form>
                            <div class="step-one-view">

                                <div class="phone">
                                    <label class="name">手机号：</label>
                                    <label>
                                        <input v-model="phone" type="phone" readonly />
                                        <a :class="[isShow ? 'huise' : '']" @click="yzm()">{{button}}</a>
                                    </label>
                                </div>
                                <div class="YZM">
                                    <label class="name">验证码：</label>
                                    <label>
                                        <input v-model="phoneYzm" type="phone" />
                                    </label>
                                    <!-- <label><a>没收到验证码？</a></label> -->
                                </div>
                                <div class="pay-agreement">
                                    我已阅读并同意<a>《关于用户充值的热别提示与约定》</a>
                                </div>
                                <div class="step-one-bt">
                                    <a class="commit" @click="add()">提交</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            phone:'',
            phoneYzm:'',
            button:'发送验证码',
            time:0,
            isShow:false
        }
    },
    mounted(){
        this.screening()
    },
    methods:{
        // 发送验证码
        yzm(){
            if(this.button == '发送验证码' || this.button == '获取验证码'){
                let reg=11 && /^((13|14|15|17|18|19|16)[0-9]{1}\d{8})$/
                if(this.phone==''){
                    this.$Message.warning('请输入手机号码')
                }else if(!reg.test(this.phone)){
                    this.$Message.warning('手机格式不正确')
                }else{
                    this.time = 60
                    apiHttp.apiLogin.yzm(this.phone,1,'',resp=>{
                        if(resp.code == 200){                          
                            this.$Message.success('验证码发送成功')
                        }else{
                            this.$Message.warning(resp.data)
                        }
                    })
                    this.timer()
                }  
            }
        },
        timer() {
            if (this.time > 0) {
                this.time--
                this.button=this.time+"s后重新获取"
                this.isShow = true
                setTimeout(this.timer, 1000)
            } else{
                this.time = 0
                this.isShow = false
                this.button = "获取验证码"
            }
        },
        // 验证手机和验证码
        add(){
            // this.$emit('serviceTabIdValue',2)
            let parmes = {
                type:1,
                phone:this.phone,
                code:this.phoneYzm
            }
            apiHttp.apiCenter.smsVerify(parmes,resp=>{
                if(resp.code == 200){
                    this.$emit('serviceTabIdValue',2)
                }else{
                    this.$Message.warning(resp.message)
                }
            })
        },
        // 获取个人资料
        screening(){
            apiHttp.apiCenter.detail('',resp => {
                this.phone = resp.phone
            })
        },
    }
}
</script>

